Timothy J. Neeb
Prof. Blake Johnson
Introducing Stylib
Multi-column layouts,
navigation links, and forms are just some of the things I have coded
with XHTML and CSS many, many times. While the underlying
similarities of the components of these sites are often not apparent because of the differences in colors, fonts, and other visual
attributes, their underlying XHTML markup and the “mechanics”
of the CSS that organize that markup on the screen change very
little. Recently, to reduce the frequent sense of dèjá-vu, I started to
develop a library that I now call Stylib. This library, a collection of
XHTML, CSS, and JavaScript fi les, not only contains all the elements
I commonly use in my design work, but also has two important
characteristics. First, the components are designed to work together
rather like Lego® bricks, and secondly, the parts that I might want
to change from one site to the next—the type sizes and colors, for
example—are broken out from the code for the underlying layout.
Width Matters
If you add more content, the layout increases its height to
accommodate it, and that is exactly what you want to have happen. However, controlling the horizontal width of these layouts is
key to the way they function. Users detest horizontal scrolling, so
it’s important to ensure they do not have to do that. Also, most of
these layouts are based on using elements that are fl oated using
CSS to create columns, and these kinds of layouts can display incorrectly if they do not maintain key width dimensions.
Floated verses Absolutely-postioned layouts
Floated columns are quick and easy to implement, but require that
you be very careful to ensure that you don’t accidentally cause the
total width of the columns to exceed the width of the layout (for
example, by increasing the width of columns by adding a large
image into it).